<template>
  <div class="simple-timeline">
    <el-timeline>
      <el-timeline-item 
        v-for="(item, index) in timelineData"
        :key="index"
        :timestamp="item.time" 
        :color="item.color  || '#409EFF'"
        :icon="item.icon"> 
        <div class="timeline-content">
          <strong>{{ item.title  }}</strong>
          <p>{{ item.desc  }}</p>
        </div>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>
 
<script setup>
import { Check, CircleCheck } from '@element-plus/icons-vue'
 
const timelineData = [
  {
    title: '项目启动',
    desc: '项目正式立项并组建团队',
    time: '2023-01-01',
    color: '#67C23A',
    icon: Check 
  },
  {
    title: '需求确认',
    desc: '完成需求文档和原型设计',
    time: '2023-02-15'
  },
  {
    title: '开发阶段',
    desc: '核心功能开发完成',
    time: '2023-04-01',
    color: '#E6A23C'
  },
  {
    title: '项目验收',
    desc: '客户验收并上线',
    time: '2023-05-20',
    color: '#F56C6C',
    icon: CircleCheck 
  }
]
</script>
 
<style scoped>
.simple-timeline {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
}
 
.timeline-content {
  padding: 8px 0;
}
 
.timeline-content strong {
  display: block;
  margin-bottom: 4px;
  font-size: 16px;
}
 
.timeline-content p {
  margin: 0;
  color: #666;
  font-size: 14px;
}
</style>